import React,{useEffect,useMemo} from 'react'
import {useDispatch,useSelector} from 'react-redux'

export default function ShopcartList() {
  const dispatch=useDispatch()
  useEffect(()=>{
    //向sagas发送action对象
    //dispatch中传递的是一个action对象
    dispatch({type:'getShopcartListSaga'})
  },[])
  const list=useSelector(state=>{
    return state.list
  })
  //useMemo来实现计算属性的功能
  const total=useMemo(()=>{
    return list.filter(item=>item.checked).reduce((prev,cur)=>prev+cur.price*cur.num,0)
  },[list])
  //更改数量的方法
  const changeNum=(_id,n)=>{
    //在dispath方法中的参数是一个action通过对象
    //该对象除了type必须要的参数外，还添加了_id和n这两个属性
    dispatch({
      type:'changeNumSaga',
      _id,
      n
    })
  }
  //勾选的方法
  const changeCheckItem=(_id)=>{
    dispatch({type:'checkItemSaga',_id})
  }
  const changeInput=(_id,n)=>{
    dispatch({type:'changeInputSaga',_id,n})
  }
  return (
    <div>
       <table>
         <thead>
          <tr>
            <th>编号</th>
            <th>名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>小计</th>
          </tr>
         </thead>
         <tbody>
            {
              list.map(item=><tr key={item._id}>
                <td>
                  <input type='checkbox' checked={item.checked} onChange={()=>{changeCheckItem(item._id)}}></input>
                </td>
                <td>{item.name}</td>
                <td>{item.price}</td>
                <td>
                  <button onClick={()=>{changeNum(item._id,-1)}}>-</button>
                  <input type="text" value= {item.num} onChange={(e)=>{changeInput(item._id,e.target.value)}}/>
                  <button onClick={()=>{changeNum(item._id,1)}}>+</button>
                </td>
                <td>{item.price*item.num}</td>
              </tr>)
            }
         </tbody>
         <tfoot>
          <tr>
            <td colSpan={5}>总价:{total}</td>
          </tr>
         </tfoot>
       </table>
    </div>
  )
}
